import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Switch, Button, message, Typography, Space, Spin } from 'antd';
import { SaveOutlined, ReloadOutlined, GlobalOutlined } from '@ant-design/icons';
import { websiteService } from '@/services/websiteService';
import { WebsiteConfig } from '@/types/website';
import styles from './WebsiteConfig.module.css';

const { Title, Text } = Typography;
const { TextArea } = Input;

const WebsiteConfigPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  // 获取网站配置
  const fetchWebsiteConfig = async () => {
    try {
      setLoading(true);
      const response = await websiteService.getWebsiteConfig();
      form.setFieldsValue(response.data);
    } catch (error) {
      message.error('获取网站配置失败');
      console.error('获取网站配置失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 提交表单
  const handleSubmit = async (values: WebsiteConfig) => {
    try {
      setSubmitting(true);
      await websiteService.updateWebsiteConfig(values);
      message.success('更新网站配置成功');
    } catch (error) {
      message.error('更新网站配置失败');
      console.error('更新网站配置失败:', error);
    } finally {
      setSubmitting(false);
    }
  };

  // 加载初始数据
  useEffect(() => {
    fetchWebsiteConfig();
  }, []);

  return (
    <div className={styles.websiteConfigContainer}>
      <Card
        title={
          <Space>
            <GlobalOutlined />
            <span>网站配置</span>
          </Space>
        }
        extra={
          <Space>
            <Button 
              icon={<ReloadOutlined />} 
              onClick={fetchWebsiteConfig}
              disabled={loading}
            >
              刷新
            </Button>
            <Button 
              type="primary" 
              icon={<SaveOutlined />} 
              onClick={() => form.submit()}
              loading={submitting}
            >
              保存配置
            </Button>
          </Space>
        }
      >
        <Spin spinning={loading}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              website_base_url: '',
              website_name: '',
              website_name_shortcut: '',
              website_footer: '',
              allow_register: true,
              submission_list_show_all: true,
            }}
          >
            <Form.Item
              label="网站基础URL"
              name="website_base_url"
              rules={[{ required: true, message: '请输入网站基础URL' }]}
              tooltip="网站的基础URL，例如: http://example.com"
            >
              <Input prefix={<GlobalOutlined />} placeholder="http://example.com" />
            </Form.Item>

            <Form.Item
              label="网站名称"
              name="website_name"
              rules={[{ required: true, message: '请输入网站名称' }]}
            >
              <Input placeholder="Online Judge" />
            </Form.Item>

            <Form.Item
              label="网站简称"
              name="website_name_shortcut"
              rules={[{ required: true, message: '请输入网站简称' }]}
              tooltip="显示在浏览器标签和其他需要简化名称的地方"
            >
              <Input placeholder="OJ" />
            </Form.Item>

            <Form.Item
              label="网站页脚"
              name="website_footer"
              tooltip="支持HTML"
            >
              <TextArea rows={4} placeholder="<p>Footer content</p>" />
            </Form.Item>

            <Form.Item 
              label="允许注册" 
              name="allow_register" 
              valuePropName="checked"
              tooltip="是否允许新用户注册"
            >
              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>

            <Form.Item 
              label="提交列表显示所有" 
              name="submission_list_show_all" 
              valuePropName="checked"
              tooltip="是否在提交列表中显示所有用户的提交，关闭则只显示当前用户的提交"
            >
              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={submitting}>
                保存设置
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </Card>
    </div>
  );
};

export default WebsiteConfigPage; 